<template>
    <div class="big-box">
        <el-card class="box-card">
            <div class="search">
                <el-input v-model="cell" placeholder="手机号" style="width: 200px;height: 32px;" />
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    range-separator="到"
                    placeholder="注册时间"
                    style="width: 30vw;margin-left: 420px;"
                    start-placeholder="起始时间"
                    end-placeholder="结束时间"
                />
                <el-button type="primary" :icon="Search" style="margin-left: 15px;" @click="searchMethod">搜索</el-button>
                <el-button @click="reset" :icon="RefreshLeft">重置</el-button>
            </div>
            <!-- table表格 -->
            <el-table :data="tableData" stripe style="width: 100%" :default-sort="{ prop: 'id', order: 'descending' }">
                <el-table-column prop="id" label="ID编号" width="180" sortable />
                <el-table-column prop="userName" label="用户昵称" width="180" />
                <el-table-column prop="mobile" label="手机号" />
                <el-table-column prop="birth" label="生日" />
                <el-table-column prop="sex" label="性别" />
                <el-table-column prop="city" label="所在地区" />
                <el-table-column prop="createTime" label="注册时间">
                    <template #default="scoped">
                        {{ filter(scoped.row.createTime) }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small"
                :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="2"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import moment from "moment"
import service from '@/utils/request.ts'
import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { ref } from 'vue'
const cell = ref('')
const date=ref([])

const currentPage3 = ref(1)
const pageSize3 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
let tableData = ref([])
const searchMethod =()=>{
    getDataList()
}
let dateValue = ['','']
const reset = () =>{
    date.value = []
    dateValue = ['','']
    cell.value = ''
    currentPage3.value = 1
    pageSize3.value = 10
    getDataList()
}
const handleSizeChange = (val: number) => {
    pageSize3.value = val
    getDataList()
}
const handleCurrentChange = (val: number) => {
    currentPage3.value=val
    getDataList()
}
const getDataList = async ()=>{
    const {code, data} = await service.get(`/api/useradmin/select?startTime=${dateValue[0]}&endTime=${dateValue[1]}&mobileSearch=${cell.value}&pagesize=${pageSize3.value}&currentPage=${currentPage3.value}`)
    if(code==200){
        tableData.value = data
    }else{
        console.log('请求失败!');
    }
}
const filter = (time:Date)=>{
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
}
watch(date, (newValue, oldValue) => {
    dateValue[0] =  moment(newValue[0]).format('YYYY-MM-DD')
    dateValue[1] =  moment(newValue[1]).format('YYYY-MM-DD')
});
onMounted(()=>{
    getDataList()
})
</script>

<style scoped lang="scss">
.big-box {
    width: 96%;
    height: auto;
    margin: 2%;

   
    .box-card {
        width: 100%;
        height: 100%;

        // 搜索样式
        .search {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: flex-end;
           
        }

        // table样式
        .el-table {
            margin-top: 5px;
        }

        .el-pagination {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>